import './MenuItem.scss';
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addSelect, removeSelect } from '../../actions/menuAction'
/**
 * 每个菜品的组件
 * @description <MenuItem />
 */
class MenuItem extends React.Component {

    /**
     * 添加菜品
     */
    addSelectItem() {
        this.props.addSelectAction({
            sub_index: this.props._index,
            fu_index: this.props._fuIndex
        })
    }

    /**
     * 移除菜品
     */
    removeSelectItem () {
        this.props.removeSelectAction({
            sub_index: this.props._index,
            fu_index: this.props._fuIndex
        })
    }

    render(){
        let item = this.props.data;
        return (
            <div className="menu-item clearfix">
                <img className="img" src={item.picture}/>
                <div className="menu-item-right">
                    <p className="item-title">{item.name}</p>
                    <p className="item-desc">{item.description}</p>
                    <p className="item-zan">
                        <span>{item.praise_content}</span>
                        <span>月售{item.month_saled}</span>
                    </p>
                    <p className="item-price">¥{item.min_price}<span className="unit">/{item.unit}</span></p>
                </div>
                <div className="select-content">
                    {item.chooseCount > 0 ? <div className="minus" onClick={this.removeSelectItem.bind(this)}></div>:null}
                    {item.chooseCount > 0 ? <div className="count">{item.chooseCount}</div> : null}
                    <div className="plus" onClick={this.addSelectItem.bind(this)}></div>
                </div>
            </div>
        );
    }
}

export default connect(
    () => ({}),
    (dispatch) => ({
        addSelectAction: bindActionCreators(addSelect, dispatch),
        removeSelectAction: bindActionCreators(removeSelect, dispatch)
    })
)(MenuItem)

